<template>
  <div>
    <div class="middle-img-wrapper">
      <img :src="topImg" style="width: 100%; height: 100%;" alt="">
    </div>
    <div class="top-list">
      <div class="block" v-for="item in ListInfo" :key="item.id">
        <Cblock
          :src="item.imgUrl"
          :describe="item.describe"
          :title="item.title"
          :price="item.price"
          :ranking="item.ranking"
          :imgHeight="128"
        ></Cblock>
      </div>
    </div>
  </div>
</template>

<script>
import Cblock from '../base/block'
export default {
  props: {
    topImg: {
      type: String,
      default: ''
    },
    ListInfo: {
      type: Array,
      default: []
    }
  },
  components: {
    Cblock
  }
}
</script>

<style lang="scss" scoped>
.middle-img-wrapper {
    height: 220px;
    width: 94%;
    margin: 15px 15px 10px 10px;
    overflow: hidden;
    border-radius: 10px;
}
.top-list {
    margin-left: 10px;
    .block {
        display: inline-block;
        margin: 5px;
        margin-top: 15px;
        margin-right: 10px; 
        width: 45%;
        height: 220px;
    }
}
</style>
